<template>
  <view class="post-detail-page" :style="{ paddingBottom: bottomCommentHeight + 'px' }">
    <!-- 页面内容容器 -->
    <view class="page-content-wrapper" :style="{ backgroundImage: `url(${backgroundImage})` }">
      <!-- 自定义导航栏 -->
      <nav-bar :title="truncatedTitle" :show-back="true"></nav-bar>

      <!-- 帖子内容 -->
      <view class="post-container">
        <!-- 发帖用户信息 -->
        <view class="post-user">
          <image class="user-avatar" :src="postData.userAvatar" mode="aspectFill"></image>
          <view class="user-info">
            <view class="user-name-container">
              <text class="user-name">{{ postData.isAnonymous ? '匿名用户' : postData.userName }}</text>
              <view v-if="isCurrentUser(postData.userId) && !postData.isAnonymous" class="me-tag">我</view>
            </view>
            <view class="post-time">{{ postData.createTime }}</view>
          </view>
          <view class="follow-btn" v-if="!postData.isAnonymous && !isCurrentUser(postData.userId)" :class="{ followed: postData.isFollowed }" @click="followUser">
            <text>{{ postData.isFollowed ? '已关注' : '关注' }}</text>
          </view>
        </view>

        <!-- 帖子内容 -->
        <view class="post-content">
          <view class="post-title">{{ postData.title }}</view>
          <view class="post-text">{{ postData.content }}</view>
        </view>

        <!-- 帖子图片 -->
        <view class="post-images" v-if="postData.images && postData.images.length > 0">
          <image
            v-for="(img, index) in postData.images"
            :key="index"
            :src="img"
            mode="widthFix"
            class="post-image"
            :class="{ 'single-image': postData.images.length === 1 }"
            @click="previewImage(index)"
          ></image>
        </view>

        <!-- 帖子标签 -->
        <view class="post-tags" v-if="postData.tags && postData.tags.length > 0">
          <view class="tag-item" v-for="(tag, index) in postData.tags" :key="index" @click="navigateToTag(tag)">#{{ tag }}</view>
        </view>

        <!-- 帖子数据 -->
        <view class="post-stats">
          <view class="stat-item">
            <tn-icon name="fire-fill" size="38" color="#FF6B35"></tn-icon>
            <text>{{ postData.viewCount }}</text>
          </view>
          <view class="stat-item like-item" :class="{ active: isLiked }" @click="toggleLike">
            <tn-icon :name="isLiked ? 'like-fill' : 'like'" size="38" :color="isLiked ? '#FF5252' : '#d2d2d2'"></tn-icon>
            <text>{{ likeCount }}</text>
          </view>
          <view class="stat-item" @click="focusCommentInput">
            <tn-icon name="reply-fill" size="38" color="#5C7C9F"></tn-icon>
            <text>{{ commentCount }}</text>
          </view>
          <view class="stat-item" @click="sharePost">
            <tn-icon name="share" size="38" color="#999999"></tn-icon>
            <text>分享</text>
          </view>
        </view>
      </view>

      <!-- 评论区分割线 -->
      <view class="comment-divider">
        <text>评论 {{ commentCount }}</text>
      </view>

      <!-- 评论列表 -->
      <view class="comment-list" v-if="commentList.length > 0">
        <view class="comment-item" v-for="comment in commentList" :key="comment.id">
          <image class="comment-avatar" :src="comment.userAvatar" mode="aspectFill"></image>
          <view class="comment-content">
            <view class="comment-user">
              <text class="user-name">{{ getDisplayUserName(comment) }}</text>
              <view v-if="isCurrentUser(comment.userId) && !comment.isAnonymous" class="me-tag">我</view>
            </view>
            <view class="comment-text">{{ comment.content }}</view>
            <view class="comment-images" v-if="comment.images && comment.images.length > 0">
              <image
                v-for="(img, imgIndex) in comment.images"
                :key="imgIndex"
                :src="img"
                mode="aspectFill"
                class="comment-image"
                @click="previewCommentImage(comment, imgIndex)"
              ></image>
            </view>
            <view class="comment-footer">
              <text class="comment-time">{{ comment.createTime }}</text>
              <view class="comment-actions">
                <view class="comment-like" @click="likeComment(comment)">
                  <tn-icon :name="comment.isLiked ? 'like-fill' : 'like'" size="24" :color="comment.isLiked ? '#FF5252' : '#999999'"></tn-icon>
                  <text>{{ comment.likeCount || '' }}</text>
                </view>
                <view class="comment-reply" @click="replyComment(comment)">
                  <text>回复</text>
                </view>
              </view>
            </view>

            <!-- 评论回复 -->
            <view class="reply-list" v-if="comment.replies && comment.replies.length > 0">
              <view class="reply-item" v-for="reply in comment.replies" :key="reply.id">
                <!-- 二级评论头像 -->
                <image class="reply-avatar" :src="reply.userAvatar" mode="aspectFill"></image>

                <!-- 二级评论内容区域 -->
                <view class="reply-content-wrapper">
                  <!-- 二级评论用户信息和回复指向 -->
                  <view class="reply-header">
                    <view class="reply-user-info">
                      <text class="reply-user-name">{{ reply.isAnonymous ? '匿名用户' : reply.userName }}</text>
                      <view v-if="isCurrentUser(reply.userId) && !reply.isAnonymous" class="me-tag me-tag-small">我</view>
                    </view>
                    <!-- 只有当回复的不是评论主时才显示"回复xxx" -->
                    <view v-if="reply.replyToUserName && reply.replyToUserName !== (comment.isAnonymous ? '匿名用户' : comment.userName)">
                      <tn-icon name="right-triangle" size="28" color="#A3D2E6"></tn-icon>
                      <text class="reply-to">
                        {{ reply.replyToUserName }}
                      </text>
                    </view>
                  </view>

                  <!-- 二级评论内容 -->
                  <view class="reply-content">{{ reply.content }}</view>

                  <!-- 二级评论图片（如果有） -->
                  <view class="reply-images" v-if="reply.images && reply.images.length > 0">
                    <image
                      v-for="(img, imgIndex) in reply.images"
                      :key="imgIndex"
                      :src="img"
                      mode="aspectFill"
                      class="reply-image"
                      @click="previewCommentImage(reply, imgIndex)"
                    ></image>
                  </view>

                  <!-- 二级评论底部操作区 -->
                  <view class="reply-footer">
                    <text class="reply-time">{{ reply.createTime }}</text>
                    <view class="reply-actions">
                      <view class="reply-like" @click="likeReply(comment, reply)">
                        <tn-icon :name="reply.isLiked ? 'like-fill' : 'like'" size="20" :color="reply.isLiked ? '#FF5252' : '#999999'"></tn-icon>
                        <text v-if="reply.likeCount > 0">{{ reply.likeCount }}</text>
                      </view>
                      <view class="reply-reply" @click="replyToReply(comment, reply)">
                        <text>回复</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="show-more" v-if="comment.replyCount > comment.replies.length" @click="loadMoreReplies(comment)">查看更多回复...</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 无评论状态 -->
      <view class="empty-comment" v-else>
        <image src="/static/images/empty-comment.png" mode="aspectFit" class="empty-image"></image>
        <text class="empty-text">暂无评论，来抢沙发吧~</text>
      </view>

      <!-- 底部评论输入框 -->
      <view id="bottomComment" class="comment-input-container">
        <!-- 底部输入区域 -->
        <view class="input-row-douyin">
          <!-- 输入框（包含内部按钮） -->
          <view class="input-wrapper" @click="openCommentModal">
            <view class="input-display">
              <!-- 图片数量提示 -->
              <text class="image-count" v-if="commentImages.length > 0">[图片]x{{ commentImages.length }}</text>
              <!-- 占位符和内容显示 -->
              <text class="input-placeholder" v-if="!commentContent.trim() && commentImages.length === 0">说点什么吧...</text>
              <text class="input-content" v-else-if="commentContent.trim()">
                {{ commentContent }}
              </text>
            </view>

            <!-- 输入框内部按钮 -->
            <view class="input-inner-actions">
              <view class="action-icon-small" @click.stop="chooseCommentImage">
                <tn-icon name="image" size="28" color="#999999"></tn-icon>
              </view>
              <view class="action-icon-small" @click.stop="showEmojiPicker">
                <tn-icon name="ghost" size="28" color="#999999"></tn-icon>
              </view>
            </view>
          </view>

          <!-- 外部发送按钮（条件显示） -->
          <button
            v-show="commentContent.trim().length > 0 || commentImages.length > 0"
            class="send-btn-external"
            :disabled="!commentContent.trim() && commentImages.length === 0"
            @click="submitComment"
          >
            发送
          </button>
        </view>
      </view>

      <!-- 评论编辑弹出层 -->
      <tn-popup v-model="showCommentModal" open-direction="bottom" :round="10" :closeable="true" :safe-area-inset-bottom="true">
        <view class="comment-popup">
          <!-- 弹出层头部 -->
          <view class="popup-header">
            <text class="popup-title">写评论</text>
            <view class="popup-close" @click="closeCommentModal">
              <tn-icon name="close" size="24" color="#999999"></tn-icon>
            </view>
          </view>

          <!-- 弹出层输入区域 -->
          <view class="popup-input-area">
            <textarea
              ref="popupTextareaRef"
              class="popup-textarea"
              v-model="commentContent"
              :placeholder="replyTo ? `回复 ${replyTo.userName}` : '说点什么吧...'"
              auto-height
              :maxlength="500"
              cursor-spacing="10"
              :show-confirm-bar="false"
            />
            <!-- 图片上传区域 -->
            <tn-image-upload
              v-show="commentImages.length > 0"
              ref="imageUploadRef"
              v-model="commentImages"
              :action="uploadAction"
              :max-count="9"
              :disabled="false"
              @fail="imgeFail"
              class="comment-image-upload"
            />
          </view>

          <!-- 弹出层底部操作区 -->
          <view class="popup-actions">
            <view class="action-left">
              <view class="action-icon" @click="chooseCommentImage">
                <tn-icon name="image" size="32" color="#666666"></tn-icon>
              </view>
              <view class="action-icon" @click="showEmojiPicker">
                <tn-icon name="ghost" size="32" color="#666666"></tn-icon>
              </view>
            </view>

            <tn-button class="send-btn-popup" :disabled="!commentContent.trim() && commentImages.length === 0" @click="submitComment" background-color="#A3D2E6" shape="round">
              发送
            </tn-button>
          </view>
        </view>
      </tn-popup>

      <!-- 表情选择器弹窗 -->
      <tn-popup v-model="showEmojiPanel" open-direction="bottom" :round="10" :closeable="true" :safe-area-inset-bottom="true">
        <view class="emoji-popup">
          <view class="emoji-header">
            <text class="emoji-title">选择表情</text>
            <view class="emoji-close" @click="hideEmojiPicker">
              <tn-icon name="close" size="24" color="#999999"></tn-icon>
            </view>
          </view>

          <view class="emoji-content">
            <view class="emoji-grid">
              <view class="emoji-item" v-for="(emoji, index) in emojiList" :key="index" @click="insertEmoji(emoji)">
                <text class="emoji-text">{{ emoji }}</text>
              </view>
            </view>
          </view>
        </view>
      </tn-popup>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import NavBar from '@/components/navbar/NavBar.vue';
import { truncateTitle } from '@/utils/textUtils.js';
import { onReady, onLoad } from '@dcloudio/uni-app';

onLoad((myoptions) => {
  // console.log('myoptions', myoptions);
  fetchPostData(myoptions.id);
});

onReady(() => {
  getBottomCommentHeight();
});

// 计算属性：截断标题
const truncatedTitle = computed(() => {
  const originalTitle = postData.value.title;
  const truncated = truncateTitle(originalTitle);
  return truncated;
});

// 计算属性：获取背景图片
const backgroundImage = computed(() => {
  // 如果帖子有图片，使用第一张图片
  if (postData.value.images && postData.value.images.length > 0) {
    return postData.value.images[0];
  }
  // 否则使用默认图片
  return 'https://img0.baidu.com/it/u=2895902758,4240700774&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800';
});

// 底部评论区高度
const bottomCommentHeight = ref(0);
// 获取底部评论输入框高度
const getBottomCommentHeight = () => {
  uni
    .createSelectorQuery()
    .select('#bottomComment')
    .boundingClientRect((data) => {
      if (data) {
        bottomCommentHeight.value = data.height;
        console.log('bottomCommentHeight:', bottomCommentHeight.value);
      }
    })
    .exec();
};

// 帖子ID
const postId = ref('');

// 当前登录用户信息
const currentUser = ref({
  id: 1005, // 模拟当前登录用户ID
  userName: 'aaron',
  userAvatar: 'https://picsum.photos/id/1005/200/200'
});

// 帖子数据
const postData = ref({
  id: 1,
  userId: 1001, // 添加发帖用户ID
  userName: '星遇用户1',
  userAvatar: 'https://picsum.photos/id/1025/200/200',
  isAnonymous: false,
  isFollowed: false,
  title: '学校食堂的Hello World美食推荐，今天发现了Amazing的新档口！',
  content:
    '今天在食堂又发现了一家超级好吃的档口，麻辣烫味道一级棒，推荐大家去尝尝！价格也很实惠，才18元一份，料也很足。\n\n打卡了三次，每次去都要排队，大家赶紧去尝尝，绝对不会后悔！',
  images: ['https://picsum.photos/id/292/600/800', 'https://picsum.photos/id/24/800/600'],
  tags: ['美食推荐', '校园生活', '省钱'],
  createTime: '10分钟前',
  viewCount: 128,
  likeCount: 36,
  commentCount: 9
});

// 评论相关
const commentList = ref([
  {
    id: 1,
    userId: 1002, // 添加评论用户ID
    userName: '星遇用户2',
    userAvatar: 'https://picsum.photos/id/1039/200/200',
    isAnonymous: false,
    content:
      '看起来好好吃，明天去尝尝！这个麻辣烫真的很不错，我之前也去过几次，每次都要排队很久，但是味道确实值得等待。价格也很实惠，18元一份确实很划算，料也很足，推荐大家都去试试。',
    createTime: '8分钟前',
    likeCount: 3,
    isLiked: false,
    replies: [
      {
        id: 101,
        userId: 1003, // 添加回复用户ID
        userName: '星遇用户3',
        userAvatar: 'https://picsum.photos/id/1040/200/200',
        isAnonymous: false,
        content: '记得要早点去，晚了排队很久的。我上次去的时候是下午5点多，排了差不多半个小时才买到，建议大家可以错峰去，比如下午4点左右或者晚上7点以后。',
        createTime: '7分钟前',
        likeCount: 1,
        isLiked: false,
        replyToUserName: '星遇用户2' // 回复评论主，不应该显示"回复xxx"
      },
      {
        id: 102,
        userId: 1005, // 当前用户的回复
        userName: 'aaron',
        userAvatar: 'https://picsum.photos/id/1005/200/200',
        isAnonymous: false,
        content: '我也想去试试，听起来很不错的样子！请问具体在二食堂的哪个位置呢？是在一楼还是二楼？我对那边不太熟悉，希望能给个详细的位置描述。',
        createTime: '6分钟前',
        likeCount: 0,
        isLiked: false,
        replyToUserName: '星遇用户2' // 回复评论主，不应该显示"回复xxx"
      },
      {
        id: 103,
        userId: 1004, // 添加回复用户ID
        userName: '星遇用户5',
        userAvatar: 'https://picsum.photos/id/1042/200/200',
        isAnonymous: false,
        content: '确实要早点去，我上次去晚了没吃到。而且现在天气冷了，热腾腾的麻辣烫确实很暖胃，推荐大家都去试试。',
        createTime: '5分钟前',
        likeCount: 2,
        isLiked: true,
        replyToUserName: '星遇用户3' // 回复其他用户，应该显示"回复xxx"
      }
    ],
    replyCount: 3
  },
  {
    id: 2,
    userId: 1006, // 添加评论用户ID（匿名用户也有ID）
    userName: '匿名用户',
    userAvatar: 'https://picsum.photos/id/1005/200/200',
    isAnonymous: true,
    content: '在哪个食堂啊？具体点位置在哪里？我是新生，对学校还不太熟悉，希望能给个详细的指路信息，谢谢大家！',
    createTime: '5分钟前',
    likeCount: 1,
    isLiked: false,
    replies: [
      {
        id: 201,
        userId: 1007, // 添加回复用户ID
        userName: '星遇用户6',
        userAvatar: 'https://picsum.photos/id/1043/200/200',
        isAnonymous: false,
        content: '应该是在二食堂一楼，进门右手边的位置，有个红色的招牌，很好找的。如果还是找不到的话，可以问问食堂的工作人员。',
        createTime: '4分钟前',
        likeCount: 0,
        isLiked: false,
        replyToUserName: '匿名用户' // 回复匿名评论主，不应该显示"回复xxx"
      }
    ],
    replyCount: 1
  },
  {
    id: 3,
    userId: 1005, // 当前用户的评论
    userName: 'aaron',
    userAvatar: 'https://picsum.photos/id/1005/200/200',
    isAnonymous: false,
    content: '我看行，这个推荐很不错！作为一个资深吃货，我觉得学校食堂确实有很多隐藏的美食，需要大家多多发现和分享。希望以后能看到更多这样的美食推荐帖子。',
    createTime: '5分钟前',
    likeCount: 1,
    isLiked: false,
    replies: [],
    replyCount: 0
  }
]);

// UI状态
const isLiked = ref(false);
const isFollowing = ref(false);
const likeCount = ref(postData.value.likeCount);
const commentCount = ref(postData.value.commentCount);

// 评论输入相关
const commentContent = ref('');
const isAnonymous = ref(false);
const replyTo = ref(null);

// 图片上传相关
const commentImages = ref(['https://picsum.photos/id/1009/200/200', 'https://picsum.photos/id/1008/200/200']);
const uploadAction = ref('https://mock-api.com/upload'); // 模拟上传接口，后续替换为真实接口

// 表情选择器相关
const showEmojiPanel = ref(false);
const emojiList = ref([
  '😀',
  '😃',
  '😄',
  '😁',
  '😆',
  '😅',
  '😂',
  '🤣',
  '😊',
  '😇',
  '🙂',
  '🙃',
  '😉',
  '😌',
  '😍',
  '🥰',
  '😘',
  '😗',
  '😙',
  '😚',
  '😋',
  '😛',
  '😝',
  '😜',
  '🤪',
  '🤨',
  '🧐',
  '🤓',
  '😎',
  '🤩',
  '🥳',
  '😏',
  '😒',
  '😞',
  '😔',
  '😟',
  '😕',
  '🙁',
  '☹️',
  '😣',
  '😖',
  '😫',
  '😩',
  '🥺',
  '😢',
  '😭',
  '😤',
  '😠',
  '😡',
  '🤬',
  '🤯',
  '😳',
  '🥵',
  '🥶',
  '😱',
  '😨',
  '😰',
  '😥',
  '😓',
  '🤗',
  '🤔',
  '🤭',
  '🤫',
  '🤥',
  '😶',
  '😐',
  '😑',
  '😬',
  '🙄',
  '😯',
  '😦',
  '😧',
  '😮',
  '😲',
  '🥱',
  '😴',
  '🤤',
  '😪',
  '😵',
  '🤐',
  '🥴',
  '🤢',
  '🤮',
  '🤧',
  '😷',
  '🤒',
  '🤕',
  '🤑',
  '🤠',
  '😈',
  '👿',
  '👹',
  '👺',
  '🤡',
  '💩',
  '👻',
  '💀',
  '☠️',
  '👽',
  '👾'
]);

// 预览图片
const previewImage = (index) => {
  uni.previewImage({
    current: index,
    urls: postData.value.images
  });
};

// 预览评论图片
const previewCommentImage = (comment, index) => {
  uni.previewImage({
    current: index,
    urls: comment.images
  });
};

// 点赞帖子
const toggleLike = () => {
  isLiked.value = !isLiked.value;
  likeCount.value += isLiked.value ? 1 : -1;

  // 实际项目中应该调用API进行点赞
  uni.showToast({
    title: isLiked.value ? '点赞成功' : '已取消点赞',
    icon: 'none'
  });
};

// 关注用户
const followUser = () => {
  postData.value.isFollowed = !postData.value.isFollowed;

  // 实际项目中应该调用API进行关注/取消关注
  uni.showToast({
    title: postData.value.isFollowed ? '关注成功' : '已取消关注',
    icon: 'none'
  });
};

// 分享帖子
const sharePost = () => {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  });
};

// 点赞评论
const likeComment = (comment) => {
  comment.isLiked = !comment.isLiked;
  comment.likeCount += comment.isLiked ? 1 : -1;

  // 实际项目中应该调用API进行评论点赞
};

// 回复评论
const replyComment = (comment) => {
  replyTo.value = {
    id: comment.id,
    userName: comment.isAnonymous ? '匿名用户' : comment.userName
  };
  focusCommentInput();
};

// 查看标签
const navigateToTag = (tag) => {
  uni.navigateTo({
    url: `/pages/forum/tag-posts?tag=${encodeURIComponent(tag)}`
  });
};

// 聚焦评论输入框
const focusCommentInput = () => {
  openCommentModal();
};

// 切换匿名状态
const toggleAnonymous = () => {
  isAnonymous.value = !isAnonymous.value;
};

// 选择图片（现在直接打开弹出层进行图片管理）
let imageChooseTimer = null;
const imageUploadRef = ref(null);
const chooseCommentImage = () => {
  // 防抖处理：300ms内只能点击一次
  if (imageChooseTimer) return;

  imageChooseTimer = setTimeout(() => {
    imageChooseTimer = null;
  }, 300);

  // 直接打开评论弹出层进行图片管理
  if (!showCommentModal.value) {
    openCommentModal();
  }

  // console.log('imageUploadRef', imageUploadRef.value);

  // 上传图片
  imageUploadRef.value?.chooseFile();
};

// 文件上传失败时触发
const imgeFail = (res) => {
  console.log('imgeFail', res);
};

// 加载更多回复
const loadMoreReplies = (comment) => {
  // 实际项目中应该调用API加载更多回复
  console.log('加载更多回复:', comment.id);
};

// 点赞二级评论
const likeReply = (comment, reply) => {
  reply.isLiked = !reply.isLiked;
  reply.likeCount += reply.isLiked ? 1 : -1;

  // 实际项目中应该调用API进行二级评论点赞
  uni.showToast({
    title: reply.isLiked ? '点赞成功' : '已取消点赞',
    icon: 'none'
  });
};

// 回复二级评论
const replyToReply = (comment, reply) => {
  replyTo.value = {
    id: comment.id, // 仍然是回复到主评论下
    userName: reply.isAnonymous ? '匿名用户' : reply.userName,
    isReplyToReply: true, // 标记这是回复二级评论
    originalReplyId: reply.id // 原始回复ID
  };
  focusCommentInput();
};

// 提交评论
const submitComment = () => {
  if (!commentContent.value.trim() && commentImages.value.length === 0) return;

  const newComment = {
    id: Date.now(),
    userId: currentUser.value.id, // 使用当前用户的ID
    userName: isAnonymous.value ? '匿名用户' : currentUser.value.userName,
    userAvatar: currentUser.value.userAvatar,
    isAnonymous: isAnonymous.value,
    content: commentContent.value,
    images: [...commentImages.value], // 包含图片信息
    createTime: '刚刚',
    likeCount: 0,
    isLiked: false,
    replies: [],
    replyCount: 0
  };

  if (replyTo.value) {
    // 回复评论
    const parentComment = commentList.value.find((c) => c.id === replyTo.value.id);
    if (parentComment) {
      const newReply = {
        id: Date.now() + 1000,
        userId: currentUser.value.id, // 使用当前用户的ID
        userName: isAnonymous.value ? '匿名用户' : currentUser.value.userName,
        userAvatar: currentUser.value.userAvatar,
        isAnonymous: isAnonymous.value,
        content: commentContent.value,
        images: [...commentImages.value], // 回复也可以包含图片
        createTime: '刚刚',
        likeCount: 0,
        isLiked: false,
        replyToUserName: replyTo.value.userName
      };

      parentComment.replies.push(newReply);
      parentComment.replyCount += 1;
    } else {
      commentList.value.unshift(newComment);
      commentCount.value += 1;
    }

    replyTo.value = null;
  } else {
    // 发表新评论
    commentList.value.unshift(newComment);
    commentCount.value += 1;
  }

  // 清空输入框和图片
  commentContent.value = '';
  commentImages.value = [];

  // 关闭评论弹出层
  closeCommentModal();

  // 实际项目中应该调用API提交评论
};

// 获取帖子数据
const fetchPostData = (id) => {
  // 实际项目中应该调用API获取帖子数据
  console.log('获取帖子数据:', id);

  // 模拟延迟
  setTimeout(() => {
    // 增加浏览量
    postData.value.viewCount++;
  }, 500);
};

// 显示表情选择器
const showEmojiPicker = () => {
  // 防抖处理：300ms内只能点击一次
  if (showEmojiPanel.value) return;
  showEmojiPanel.value = true;
};

// 隐藏表情选择器
const hideEmojiPicker = () => {
  showEmojiPanel.value = false;
  // 如果评论弹出层是打开的，保持其打开状态
  // 不需要额外的聚焦逻辑，因为弹出层会自动处理
};

// 插入表情到输入框
const insertEmoji = (emoji) => {
  commentContent.value += emoji;
  hideEmojiPicker();
};

// 打开评论编辑弹出层
const showCommentModal = ref(false);
const popupTextareaRef = ref(null);
const openCommentModal = () => {
  showCommentModal.value = true;
  // 确保表情选择器关闭
  if (showEmojiPanel.value) {
    hideEmojiPicker();
  }
  // 等待 DOM 更新
  // console.log('popupTextareaRef:', popupTextareaRef.value);
  // 输入框聚焦
  popupTextareaRef.value?.focus();
};

const closeCommentModal = () => {
  showCommentModal.value = false;
};

// 判断是否为当前用户
const isCurrentUser = (userId) => {
  return userId === currentUser.value.id;
};

// 获取显示的用户名（包含"我"标签逻辑）
const getDisplayUserName = (comment) => {
  if (comment.isAnonymous) {
    return '匿名用户';
  }
  return comment.userName;
};
</script>

<style lang="scss" scoped>
// 浅彩像素风色彩体系
$pixel-yellow: #fff3c2; // 浅鹅黄（信息背景）
$pixel-white: #f8f9fc; // 淡云白（全局背景）
$pixel-blue: #a3d2e6; // 雾湖蓝（功能主色）
$pixel-gray: #d4cdc3; // 砂岩灰（分割线）
$pixel-cream: #ffeedb; // 奶油霜（高光点缀）
$pixel-text-primary: #5c7c9f; // 雾蓝（一级标题）
$pixel-text-content: #6d6d6d; // 暖灰（正文）
$pixel-text-helper: #b3b9c2; // 银灰（辅助文字）

.post-detail-page {
  min-height: 100vh;
  background-color: $pixel-white;
  position: relative;

  /* 页面内容容器 */
  .page-content-wrapper {
    position: relative;
    z-index: 2; // 确保内容在遮罩层之上
    overflow: hidden; // 确保背景图不会溢出

    /* 背景图样式 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; // 固定背景效果
  }
}

.post-container {
  background-color: rgba(255, 255, 255, 0.9); // 增加透明度
  padding: 30rpx;
  margin-top: 0; // 确保与导航栏占位元素无缝连接

  /* 柔光滤镜效果 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.post-user {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  .user-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 16rpx;
    border: 2rpx solid rgba($pixel-blue, 0.6);
    background-color: $pixel-gray;
  }

  .user-info {
    flex: 1;

    .user-name-container {
      display: flex;
      align-items: center;

      .user-name {
        font-size: 30rpx;
        font-weight: bold;
        color: $pixel-text-primary;
      }

      .me-tag {
        margin-left: 8rpx;
        padding: 4rpx 10rpx;
        border-radius: 20rpx;
        background-color: $pixel-blue;
        color: $pixel-white;
        font-size: 22rpx;
        font-weight: normal;

        /* 双层描边效果 */
        border: 1rpx solid rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3);

        /* 柔光滤镜效果 */
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
      }
    }

    .post-time {
      font-size: 24rpx;
      color: $pixel-text-helper;
    }
  }

  .follow-btn {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    background-color: $pixel-blue;
    color: $pixel-white;
    transition: all 0.3s ease;

    /* 双层描边效果 */
    border: 2rpx solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3);

    /* 柔光滤镜效果 */
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);

    /* 已关注状态 */
    &.followed {
      background-color: $pixel-gray;
      color: $pixel-text-content;
    }

    /* 点击效果 */
    &:active {
      transform: scale(0.95);
      /* 鹅黄色涟漪波纹效果 */
      box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3), 0 0 10rpx 2rpx rgba($pixel-yellow, 0.7);
    }

    text {
      color: inherit;
    }
  }
}

.post-content {
  margin-bottom: 20rpx;

  .post-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
    color: $pixel-text-primary;
  }

  .post-text {
    font-size: 30rpx;
    line-height: 1.6;
    color: $pixel-text-content;
    white-space: pre-wrap;
    word-break: break-all;
  }
}

.post-images {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;

  .post-image {
    width: 31%;
    margin-right: 2%;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    border: 1rpx solid rgba($pixel-blue, 0.3);

    /* 柔光滤镜效果 */
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);

    &.single-image {
      max-width: 80%;
      width: auto;
    }
  }
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;

  .tag-item {
    font-size: 24rpx;
    color: $pixel-blue;
    margin-right: 16rpx;
    margin-bottom: 8rpx;
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    transition: all 0.3s ease;

    &:active {
      color: $pixel-text-primary;
      transform: scale(0.95);
    }
  }
}

.post-stats {
  display: flex;
  border-top: 1px solid rgba($pixel-gray, 0.5);
  padding-top: 20rpx;

  .stat-item {
    display: flex;
    align-items: center;
    margin-right: 40rpx;

    &.like-item.active {
      color: #ff5252;
    }

    text {
      font-size: 26rpx;
      color: $pixel-text-helper;
      margin-left: 6rpx;
    }
  }
}

.comment-divider {
  background-color: rgba($pixel-white, 0.9); // 增加透明度
  padding: 20rpx 30rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: $pixel-text-primary;
  border-top: 1rpx solid rgba($pixel-gray, 0.3);

  /* 柔光滤镜效果 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.comment-list {
  background-color: rgba(255, 255, 255, 0.9); // 增加透明度
  padding: 0 30rpx;

  /* 柔光滤镜效果 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.comment-item {
  display: flex;
  align-items: flex-start;
  padding: 30rpx 0;
  border-bottom: 1px solid rgba($pixel-gray, 0.5);

  &:last-child {
    border-bottom: none;
  }

  .comment-avatar {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    margin-right: 16rpx;
    border: 2rpx solid rgba($pixel-blue, 0.6);
    background-color: $pixel-gray;
    flex-shrink: 0;
  }

  .comment-content {
    flex: 1;
    min-width: 0;

    .comment-user {
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
      color: $pixel-text-primary;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .user-name {
        color: $pixel-text-primary;
        flex-shrink: 0;
      }

      .me-tag {
        margin-left: 8rpx;
        padding: 4rpx 10rpx;
        border-radius: 20rpx;
        background-color: $pixel-blue;
        color: $pixel-white;
        font-size: 22rpx;
        font-weight: normal;
        flex-shrink: 0;

        /* 双层描边效果 */
        border: 1rpx solid rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3);

        /* 柔光滤镜效果 */
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
      }
    }

    .comment-text {
      font-size: 28rpx;
      line-height: 1.6;
      margin-bottom: 16rpx;
      color: $pixel-text-content;
      white-space: pre-wrap;
      word-wrap: break-word;
      word-break: break-all;
      overflow-wrap: break-word;
    }

    .comment-images {
      display: flex;
      margin-bottom: 16rpx;

      .comment-image {
        width: 150rpx;
        height: 150rpx;
        margin-right: 16rpx;
        border-radius: 8rpx;
        border: 1rpx solid rgba($pixel-blue, 0.3);

        /* 柔光滤镜效果 */
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
      }
    }

    .comment-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;

      .comment-time {
        font-size: 24rpx;
        color: $pixel-text-helper;
      }

      .comment-actions {
        display: flex;

        .comment-like,
        .comment-reply {
          display: flex;
          align-items: center;
          margin-left: 20rpx;
          padding: 8rpx 12rpx;
          border-radius: 20rpx;
          transition: all 0.3s ease;

          &:active {
            transform: scale(0.9);
            background-color: rgba($pixel-blue, 0.1);
          }

          text {
            font-size: 24rpx;
            color: $pixel-text-helper;
            margin-left: 4rpx;
          }
        }

        .comment-reply {
          /* 回复按钮样式 */
          &:active {
            transform: scale(0.9);
            background-color: rgba($pixel-blue, 0.1);
            /* 鹅黄色涟漪波纹效果 */
            box-shadow: 0 0 8rpx 2rpx rgba($pixel-yellow, 0.4);
          }
        }
      }
    }
  }
}

.reply-list {
  background-color: #abacad24;
  padding: 16rpx;
  border-radius: 8rpx;

  .reply-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .reply-avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 12rpx;
      border: 2rpx solid rgba($pixel-blue, 0.6);
      background-color: $pixel-gray;
      flex-shrink: 0;
    }

    .reply-content-wrapper {
      flex: 1;
      min-width: 0;

      .reply-header {
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;
        flex-wrap: wrap;

        .reply-user-info {
          display: flex;
          align-items: center;
          flex-shrink: 0;

          .reply-user-name {
            font-size: 26rpx;
            color: $pixel-text-primary;
            font-weight: bold;
          }

          .me-tag-small {
            margin-left: 6rpx;
            padding: 2rpx 8rpx;
            border-radius: 16rpx;
            background-color: $pixel-blue;
            color: $pixel-white;
            font-size: 20rpx;
            font-weight: normal;
            flex-shrink: 0;

            /* 双层描边效果 */
            border: 1rpx solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3);

            /* 柔光滤镜效果 */
            backdrop-filter: blur(1px);
            -webkit-backdrop-filter: blur(1px);
          }
        }

        .reply-to {
          color: $pixel-blue;
          display: inline-flex;
          align-items: center;
          font-size: 24rpx;
          margin-left: 8rpx;

          /* 图标样式 */
          tn-icon {
            margin-right: 4rpx;
            vertical-align: middle;
          }
        }
      }

      .reply-content {
        font-size: 26rpx;
        color: $pixel-text-content;
        line-height: 1.5;
        margin-bottom: 12rpx;
        white-space: pre-wrap;
        word-wrap: break-word;
        word-break: break-all;
        overflow-wrap: break-word;
      }

      .reply-images {
        display: flex;
        margin-bottom: 12rpx;

        .reply-image {
          width: 120rpx;
          height: 120rpx;
          margin-right: 12rpx;
          border-radius: 8rpx;
          border: 1rpx solid rgba($pixel-blue, 0.3);

          /* 柔光滤镜效果 */
          backdrop-filter: blur(1px);
          -webkit-backdrop-filter: blur(1px);
        }
      }

      .reply-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .reply-time {
          font-size: 22rpx;
          color: $pixel-text-helper;
        }

        .reply-actions {
          display: flex;

          .reply-like,
          .reply-reply {
            display: flex;
            align-items: center;
            margin-left: 16rpx;
            padding: 6rpx 10rpx;
            border-radius: 16rpx;
            transition: all 0.3s ease;

            &:active {
              transform: scale(0.9);
              background-color: rgba($pixel-blue, 0.1);
            }

            text {
              font-size: 22rpx;
              color: $pixel-text-helper;
              margin-left: 4rpx;
            }
          }

          .reply-reply {
            /* 回复按钮样式 */
            &:active {
              transform: scale(0.9);
              background-color: rgba($pixel-blue, 0.1);
              /* 鹅黄色涟漪波纹效果 */
              box-shadow: 0 0 6rpx 1rpx rgba($pixel-yellow, 0.4);
            }
          }
        }
      }
    }
  }

  .show-more {
    font-size: 24rpx;
    color: $pixel-blue;
    padding: 8rpx 0;
    margin-left: 72rpx;
  }
}

.empty-comment {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
  background-color: rgba(255, 255, 255, 0.9); // 增加透明度

  /* 柔光滤镜效果 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: $pixel-text-helper;
  }
}

.comment-input-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.95); // 增加透明度
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  /* 底部安全距离 */
  padding-bottom: env(safe-area-inset-bottom);

  /* 柔光滤镜效果 */
  backdrop-filter: blur(12px); // 底部输入框需要更强的模糊效果
  -webkit-backdrop-filter: blur(12px);

  .input-row-douyin {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .input-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: $pixel-white;
      border-radius: 35rpx;
      padding: 15rpx 20rpx;
      margin-right: 16rpx;
      border: 1rpx solid rgba($pixel-blue, 0.3);
      min-height: 70rpx;

      /* 柔光滤镜效果 */
      backdrop-filter: blur(1px);
      -webkit-backdrop-filter: blur(1px);

      .input-display {
        flex: 1;
        display: flex;
        align-items: center;
        margin-right: 16rpx;

        /* 图片数量提示 */
        .image-count {
          font-size: 24rpx;
          color: $pixel-blue;
          background-color: rgba($pixel-blue, 0.1);
          padding: 4rpx 8rpx;
          border-radius: 8rpx;
          margin-right: 8rpx;
          flex-shrink: 0;

          /* 柔光滤镜效果 */
          backdrop-filter: blur(1px);
          -webkit-backdrop-filter: blur(1px);
        }

        /* 占位符和内容显示 */
        .input-placeholder {
          font-size: 28rpx;
          color: $pixel-text-helper;
          max-width: 400rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .input-content {
          font-size: 28rpx;
          color: $pixel-text-content;
          /* 单行显示，超出省略 */
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 320rpx;
        }
      }

      .input-inner-actions {
        display: flex;
        align-items: center;
        flex-shrink: 0; /* 防止按钮被压缩 */

        .action-icon-small {
          padding: 6rpx;
          margin-left: 12rpx;
          border-radius: 50%;
          transition: all 0.3s ease;

          &:active {
            transform: scale(0.9);
            background-color: rgba($pixel-blue, 0.1);
          }
        }
      }
    }

    .send-btn-external {
      height: 60rpx;
      background-color: $pixel-blue;
      color: $pixel-white;
      font-size: 28rpx;
      border-radius: 30rpx;
      padding: 0 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease;
      flex-shrink: 0; /* 防止按钮被压缩 */

      /* 显示/隐藏动画 */
      opacity: 1;
      transform: scale(1);

      /* 双层描边效果 */
      border: 2rpx solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3);

      /* 柔光滤镜效果 */
      backdrop-filter: blur(1px);
      -webkit-backdrop-filter: blur(1px);

      &::after {
        border: none;
      }

      &:active {
        transform: scale(0.95);
        /* 鹅黄色涟漪波纹效果 */
        box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3), 0 0 15rpx 3rpx rgba($pixel-yellow, 0.6);
      }

      &[disabled] {
        opacity: 0.6;
        background-color: $pixel-gray;
      }

      /* v-show 动画效果 */
      &.v-enter-active,
      &.v-leave-active {
        transition: all 0.3s ease;
      }

      &.v-enter-from {
        opacity: 0;
        transform: scale(0.8);
      }

      &.v-leave-to {
        opacity: 0;
        transform: scale(0.8);
      }
    }
  }
}

.comment-popup {
  padding: 30rpx 20rpx 20rpx;
  width: 100%;
  max-width: 750rpx;
  max-height: 60vh;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.95); // 增加透明度

  /* 浅彩像素风样式 */
  border-radius: 24rpx 24rpx 0 0;

  /* 柔光滤镜效果 */
  backdrop-filter: blur(12px); // 增加模糊效果
  -webkit-backdrop-filter: blur(12px);

  /* 添加安全区域适配 */
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid rgba($pixel-gray, 0.3);

    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: $pixel-text-primary;
    }

    .popup-close {
      padding: 12rpx;
      border-radius: 50%;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.9);
        background-color: rgba($pixel-blue, 0.1);
      }
    }
  }

  .popup-input-area {
    overflow-y: auto;
    max-height: 45vh;
    border: 1rpx solid rgba($pixel-blue, 0.3);
    background-color: $pixel-white;
    border-radius: 16rpx;
    /* 自定义滚动条样式 */
    &::-webkit-scrollbar {
      width: 6rpx;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3rpx;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba($pixel-blue, 0.3);
      border-radius: 3rpx;
    }

    .popup-textarea {
      flex: 1;
      min-height: 120rpx;
      max-height: 300rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      font-size: 28rpx;

      line-height: 1.4;
      resize: none;
      width: 100%;
      box-sizing: border-box;

      /* 柔光滤镜效果 */
      backdrop-filter: blur(1px);
      -webkit-backdrop-filter: blur(1px);

      /* 移除默认样式 */
      outline: none;
    }

    .comment-image-upload {
      width: 100%;
      height: 100%;
    }
  }

  .popup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16rpx;

    .action-left {
      display: flex;
      align-items: center;

      .action-icon {
        margin-right: 30rpx;
        padding: 12rpx;
        border-radius: 50%;
        transition: all 0.3s ease;
        background-color: rgba($pixel-blue, 0.05);

        &:last-child {
          margin-right: 0;
        }

        &:active {
          transform: scale(0.9);
          background-color: rgba($pixel-blue, 0.2);
        }
      }
    }

    .send-btn-popup {
      /* 使用Tuniao UI的按钮样式，通过CSS变量覆盖 */
      --tn-button-bg-color: #{$pixel-blue};
      --tn-button-text-color: #ffffff;
      --tn-button-border-radius: 30rpx;

      /* 双层描边效果 */
      border: 2rpx solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3);

      /* 柔光滤镜效果 */
      backdrop-filter: blur(1px);
      -webkit-backdrop-filter: blur(1px);

      &:active {
        /* 鹅黄色涟漪波纹效果 */
        box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3), 0 0 15rpx 3rpx rgba($pixel-yellow, 0.6);
      }
    }
  }
}

.emoji-popup {
  padding: 30rpx 20rpx 20rpx;
  width: 100%;
  max-width: 750rpx;
  max-height: 60vh;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.95); // 增加透明度

  /* 浅彩像素风样式 */
  border-radius: 24rpx 24rpx 0 0;

  /* 柔光滤镜效果 */
  backdrop-filter: blur(12px); // 增加模糊效果
  -webkit-backdrop-filter: blur(12px);

  /* 添加安全区域适配 */
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

  .emoji-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid rgba($pixel-gray, 0.3);

    .emoji-title {
      font-size: 32rpx;
      font-weight: bold;
      color: $pixel-text-primary;
    }

    .emoji-close {
      padding: 12rpx;
      border-radius: 50%;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.9);
        background-color: rgba($pixel-blue, 0.1);
      }
    }
  }

  .emoji-content {
    overflow-y: auto;
    max-height: 45vh;

    /* 自定义滚动条样式 */
    &::-webkit-scrollbar {
      width: 6rpx;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3rpx;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba($pixel-blue, 0.3);
      border-radius: 3rpx;
    }

    .emoji-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 20rpx;
      justify-items: center;
      padding: 10rpx 0;

      .emoji-item {
        width: 80rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 16rpx;
        transition: all 0.3s ease;
        background-color: rgba($pixel-blue, 0.05);

        /* 双层描边效果 */
        border: 1rpx solid rgba($pixel-blue, 0.1);

        &:active {
          transform: scale(0.9);
          background-color: rgba($pixel-blue, 0.2);
          /* 鹅黄色涟漪波纹效果 */
          box-shadow: 0 0 10rpx 2rpx rgba($pixel-yellow, 0.4);
        }

        .emoji-text {
          font-size: 40rpx;
          line-height: 1;
        }
      }
    }
  }
}
</style>
